<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Home</title>

<style type="text/css">
pre {
	border: solid 1px;
	padding: 0.5em;
}
</style>
</head>
<body>

	<textarea style="width: 100%"></textarea>
	<button onclick="sock.send($('textarea').val())">send</button>
	<button onclick="$('div').html('')">clear</button>
	<div></div>
	<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script th:inline="javascript">
			var url='ws://'+location.host+[[@{/marco}]];
			var sock=new WebSocket(url);
			
			sock.onopen=function(){
				console.log('Opening');
			}
			
			sock.onclose=function () {
				console.log('Closing');
			}
			
			sock.onmessage=function(e) {
				console.log('Recieve message:'+e.data);				
				var a=$('<pre></pre>');				
				a.text(e.data);				
				$('div').append(a);			
				
			}
		</script>

</body>
</html>
